<template>
    <v-app>
      <!-- 顶部导航栏 -->
      <app-bar @toggle-drawer="isDrawerOpen = !isDrawerOpen" />
      
      <!-- 侧边导航抽屉 -->
      <app-navigation-drawer v-model="isDrawerOpen" />
      
      <!-- 主内容区域 -->
      <v-main>
        <v-container fluid class="pa-4">
          <slot /> <!-- 这里将渲染子路由内容 -->
        </v-container>
      </v-main>
      
      <!-- 底部页脚 -->
    </v-app>
  </template>
  
  <script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useDisplay } from 'vuetify'
  import AppBar from '@/components/navigation/AppBar.vue'
  import AppNavigationDrawer from '@/components/navigation/AppNavigationDrawer.vue'
  
  const { mdAndUp } = useDisplay()
  const isDrawerOpen = ref(mdAndUp.value) // 桌面端默认展开抽屉
  
  // 响应屏幕尺寸变化
  watch(mdAndUp, (newVal) => {
    isDrawerOpen.value = newVal
  })
  </script>
  
  <style scoped>
  .v-main {
    min-height: calc(100vh - 64px); /* 减去AppBar高度 */
    transition: all 0.3s ease;
  }
  </style>